<template>
  <div class="modal-overlay" @click="$emit('close')">
    <div class="modal" @click.stop>
      <h2>确认预定</h2>
      
      <div class="reservation-summary">
        <div class="product-info">
          <img :src="product.image" :alt="product.name" class="product-image" />
          <div class="product-details">
            <h3>{{ product.name }}</h3>
            <p class="description">{{ product.description }}</p>
            <p class="price">单价: ¥{{ product.price.toFixed(2) }}</p>
            <p class="quantity">数量: {{ quantity }}</p>
            <p class="stock">剩余库存: {{ product.stock }}</p>
          </div>
        </div>
        
        <div class="total-section">
          <div class="total-amount">
            <strong>预定总额: ¥{{ totalAmount.toFixed(2) }}</strong>
          </div>
        </div>
      </div>

      <form @submit.prevent="submitReservation" class="reservation-form">
        <div class="form-group">
          <label>联系人姓名 *</label>
          <input 
            v-model="reservationForm.name" 
            type="text" 
            required 
            placeholder="请输入您的姓名"
          />
        </div>
        
        <div class="form-group">
          <label>联系电话 *</label>
          <input 
            v-model="reservationForm.phone" 
            type="tel" 
            required 
            placeholder="请输入您的联系电话"
          />
        </div>
        
        <div class="form-group">
          <label>收货地址 *</label>
          <textarea 
            v-model="reservationForm.address" 
            required 
            placeholder="请输入详细的收货地址"
            rows="3"
          ></textarea>
        </div>
        
        <div class="form-group">
          <label>备注信息</label>
          <textarea 
            v-model="reservationForm.notes" 
            placeholder="如有特殊要求请在此说明"
            rows="2"
          ></textarea>
        </div>

        <div class="form-notice">
          <p><strong>预定说明：</strong></p>
          <ul>
            <li>预定成功后，商品库存将被锁定</li>
            <li>请在24小时内确认预定，否则将自动释放</li>
            <li>确认预定后，我们将尽快安排发货</li>
          </ul>
        </div>

        <div class="modal-actions">
          <button type="button" @click="$emit('close')" class="cancel-btn">
            取消
          </button>
          <button type="submit" class="submit-btn" :disabled="isSubmitting">
            {{ isSubmitting ? '提交中...' : '确认预定' }}
          </button>
        </div>
      </form>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

const props = defineProps(['product', 'quantity'])
const emit = defineEmits(['close', 'submit-reservation'])

const isSubmitting = ref(false)

const reservationForm = ref({
  name: '',
  phone: '',
  address: '',
  notes: ''
})

const totalAmount = computed(() => {
  return props.product.price * props.quantity
})

const submitReservation = async () => {
  if (isSubmitting.value) return
  
  isSubmitting.value = true
  
  try {
    await new Promise(resolve => setTimeout(resolve, 1000)) // 模拟网络请求
    
    emit('submit-reservation', {
      product: props.product,
      quantity: props.quantity,
      userInfo: { ...reservationForm.value },
      totalAmount: totalAmount.value
    })
  } catch (error) {
    console.error('预定提交失败:', error)
  } finally {
    isSubmitting.value = false
  }
}
</script>

<style scoped>
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal {
  background: white;
  padding: 2rem;
  border-radius: 12px;
  max-width: 600px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
}

.modal h2 {
  margin: 0 0 1.5rem 0;
  color: #333;
  text-align: center;
}

.reservation-summary {
  background: #f8f9fa;
  padding: 1.5rem;
  border-radius: 8px;
  margin-bottom: 1.5rem;
}

.product-info {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
}

.product-image {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
}

.product-details h3 {
  margin: 0 0 0.5rem 0;
  color: #333;
}

.product-details p {
  margin: 0.25rem 0;
  color: #666;
}

.product-details .price {
  color: #e74c3c;
  font-weight: bold;
}

.product-details .quantity {
  color: #007bff;
  font-weight: bold;
}

.product-details .stock {
  color: #28a745;
  font-size: 0.9rem;
}

.total-section {
  border-top: 1px solid #dee2e6;
  padding-top: 1rem;
}

.total-amount {
  text-align: right;
  font-size: 1.2rem;
  color: #e74c3c;
}

.form-group {
  margin-bottom: 1rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: bold;
  color: #333;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 1rem;
  transition: border-color 0.2s;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #007bff;
}

.form-notice {
  background: #e3f2fd;
  padding: 1rem;
  border-radius: 6px;
  margin: 1rem 0;
  border-left: 4px solid #2196f3;
}

.form-notice p {
  margin: 0 0 0.5rem 0;
  color: #1976d2;
  font-weight: bold;
}

.form-notice ul {
  margin: 0;
  padding-left: 1.5rem;
  color: #1976d2;
}

.form-notice li {
  margin-bottom: 0.25rem;
}

.modal-actions {
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
  margin-top: 1.5rem;
}

.cancel-btn {
  padding: 0.75rem 1.5rem;
  border: 1px solid #ddd;
  background: white;
  color: #666;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1rem;
}

.cancel-btn:hover {
  background: #f8f9fa;
}

.submit-btn {
  padding: 0.75rem 1.5rem;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1rem;
  font-weight: bold;
  transition: background-color 0.2s;
}

.submit-btn:hover:not(:disabled) {
  background: #0056b3;
}

.submit-btn:disabled {
  background: #6c757d;
  cursor: not-allowed;
}
</style>
